<script>
export default {
  name: 'root component',
  provide(){
    return {
        goods: this.goods
    }
  },
  data() {
    return {
        goods: [
            { id: 9001, name: '小米 13 Pro', price: 3999, stock: 11 } ,
            { id: 8002, name: '红米 K50', price: 1999, stock: 20 } ,
            { id: 9123, name: '一加 10 Pro', price: 4499, stock: 30 } ,
            { id: 9876, name: '睡佛是怎样炼成的', price: 88, stock: 52 }
        ]
    }
  },
  methods: {
    firstHandler() {
        this.$router.push('/goods');
    },
    secondHandler() {
        //this.$router.push({ path: '/person', query: {id: 1001, name: '阿芳'} });
        this.$router.push({ name: 'personRoute', query: {id: 1001, name: '阿芳'}, hash: '#team' });
    },
    thirdHandler() {
        this.$router.push({ name: 'humanRoute', params: {id: 1001, name: '阿芳'}, hash: '#team' });
    },
    fourthHandler() {
        // this.$router.push({ path: '/user' , replace: true });
        this.$router.replace('/user');
    }
  },
  mounted() {
    console.log( this.$router );
  }
}
</script>

<template>
    <el-container>
        <el-header class="top">
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="20">
                    <el-menu mode="horizontal" :ellipsis="false">
                        <el-sub-menu index="person">
                            <template #title>Person</template>
                            <el-menu-item index="queryString">
                                <RouterLink to="/person?id=1001&name=afang">
                                    直接在路径中携带参数
                                </RouterLink>
                            </el-menu-item>
                            <el-menu-item index="queryString">
                                <router-link v-bind:to="{ name: 'personRoute', query: { id: 1001, name: '阿芳'} }">
                                    为`to`绑定对象(name)
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="queryString">
                                <router-link v-bind:to="{ path: '/person', query: { id: 1001, name: '阿芳'} }">
                                    为`to`绑定对象(path)
                                </router-link>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="human">
                            <template #title>Human</template>
                            <el-menu-item index="human-first">
                                <router-link to="/human/2002/阿琴">
                                    通过路径传递
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="human-second">
                                <router-link v-bind:to="{ name: 'humanRoute', params: { id: 1001, name: '阿芳'} }">
                                    通过对象传递
                                </router-link>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="goods">
                            <router-link to="/goods">商品</router-link>
                        </el-menu-item>
                        <el-menu-item index="cart">
                            <router-link to="/cart">购物车</router-link>
                        </el-menu-item>
                        <el-menu-item index="user">
                            <router-link to="/user">用户</router-link>
                        </el-menu-item>
                        <el-menu-item index="topic1">
                            <router-link to="/topic/1">话题1</router-link>
                        </el-menu-item>
                        <el-menu-item index="topic2">
                            <router-link to="/topic/2">话题2</router-link>
                        </el-menu-item>
                        <el-sub-menu index="navigation">
                            <template #title>编程式导航</template>
                            <el-menu-item index="navigation-first" @click="firstHandler">
                                导航到商品列表
                            </el-menu-item>
                            <el-menu-item index="navigation-second" @click="secondHandler">
                                导航并传递参数(queryString)
                            </el-menu-item>
                            <el-menu-item index="navigation-third" @click="thirdHandler">
                                导航并传递参数(路由参数)
                            </el-menu-item>
                            <el-menu-item index="navigation-fourth" @click="fourthHandler">
                                替换当前位置
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-col>
            </el-row>
        </el-header>
        <el-container class="wrapper">
            <el-aside class="aside">
                <!--命名视图-->
                <router-view name="sidebar"></router-view>
            </el-aside>
            <el-main class="main">
                <!--命名视图-->
                <router-view name="default"></router-view>
            </el-main>
        </el-container>
        <el-footer class="bottom">
            <el-menu mode="horizontal" default-active="home">
                <el-menu-item index="introduction">
                    <RouterLink to="/introduction">介绍</RouterLink>
                </el-menu-item>
                <el-menu-item index="home">
                    <RouterLink to="/home">主页</RouterLink>
                </el-menu-item>
                <el-menu-item index="index">
                    <RouterLink to="/index">首页</RouterLink>
                </el-menu-item>
                <el-menu-item index="homePage">
                    <RouterLink to="/home/page">烘培鸡</RouterLink>
                </el-menu-item>
                <el-menu-item index="basic">
                    <RouterLink to="/basic">基础</RouterLink>
                </el-menu-item>
                <el-menu-item index="advanced">
                    <router-link to="/advanced">高级</router-link>
                </el-menu-item>
            </el-menu>
        </el-footer>
    </el-container>
</template>

<style scoped>
.top {
    background: #fff;
}

.wrapper {
    min-height: 400px;
}

.main {
    padding: 0;
}

.bottom {
    background: #fff;
}
</style>
